<template>
  <div>
    <h1>自定义指令</h1>
    <hr />
    <input v-focus type="text" />
    <h2 @click="color = 'black'" v-changeColor="color">123</h2>
  </div>
</template>

<script>
export default {
  directives: {
    // key(指令名): val对象(写逻辑)
    changeColor: {
      // 当被绑定的元素插入到DOM中时执行一次
      inserted(el, binding) {
        console.log(el, binding);
        // 操作DOM
        // 通过binding.value获取指令绑定的变量值
        el.style.color = binding.value;
      },
      // 如果没有update函数，即使绑定了变成黑色的点击事件，则color变量会更改为black，但标签颜色不会改变
      update(el, binding) {
        console.log("更新后执行：", el, binding);
        el.style.color = binding.value;
      },
    },
  },
  data() {
    return {
      color: "pink",
    };
  },
};
</script>

<style scoped>
</style>